<template>
  <div class="detailBox">
    <div class="item1">
      <img class="cover" :src="detailData.thumb" />
    </div>
    <div class="activeTitle">{{ detailData.title }}</div>
    <div class="item2">
      <div class="item2L">
        <!-- <img :src="detailData.thumb" class="logo" /> -->
        <Avatar
              class="logo"
                shape="square"
                :src="detailData.thumb"
                @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                icon="ios-person"
                size="60"
              />
        <div class="item2Info">
          <div class="activeName">{{ detailData.title }}</div>
          <!-- <div class="activeAccount">官方账号</div> -->
        </div>
      </div>
      <div class="item2R">
        <Button :style="{
          backgroundColor: signUpText==='去报名'?'red':'#dedede',
          borderColor: signUpText==='去报名'?'red':'#dedede'
        }" type="error" @click="toSignUp">
          {{signUpText}}
        </Button>
      </div>
    </div>
    <Tabs value="name1" @on-click="changeTab">
      <TabPane label="基本信息" name="name1">
        <div class="baseInfo">
          <div class="baseInfoItem">
            <img src="@/assets/active/pic2.png" class="iconImg" />
            <span
              >报名时间：<span class="valueText"
                >{{ detailData.ready_stime }} ~
                {{ detailData.ready_time }}</span
              ></span
            >
          </div>
          <div class="baseInfoItem">
            <img src="@/assets/active/pic1.png" class="iconImg" />
            <span
              >活动时间：<span class="valueText"
                >{{ detailData.act_stime }} ~ {{ detailData.act_time }}</span
              ></span
            >
          </div>
          <div class="baseInfoItem">
            <img src="@/assets/active/pic3.png" class="iconImg" />
            <span
              >报名人数：<span class="valueText">
                {{ detailData.num }}
              </span>
              </span>
            <span class="lastNum">剩余人数：<span class="valueText">
                {{ detailData.num - detailData.bnum }}
              </span></span>
          </div>
          <div class="baseInfoDesc" v-html="detailData.content"></div>
          <!-- <div class="baseInfoImg">
            <img :src="detailData.thumb" alt="" />
          </div> -->
        </div>
      </TabPane>
      <TabPane label="活动说明" name="name2">
        <div class="activeInfo">
          <div class="activeInfoDesc" v-html="detailData.content"></div>
          <!-- <div class="activeInfoImg">
            <img :src="detailData.thumb" alt="" />
          </div> -->
        </div>
      </TabPane>
      <TabPane label="报名列表" name="name3" v-if="!isActiveStart">
        <div class="signUpList">
          <div class="signUpListItem" v-for="item in signUpList" :key="item.id">
            <div class="signUpItemLeft">
              <!-- <img :src="item.face" class="avatar" /> -->
              <Avatar
              class="avatar"
              @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                shape="circle"
                :src="item.face"
                icon="ios-person"
                size="28"
              />
              <div class="signUpInfo">
                <div class="signUpName">{{ item.nick_name }}</div>
                <div class="signUpTime">报名时间：{{ item.ctime }}</div>
              </div>
            </div>
            <div class="signUpItemRight">
              报名成功
            </div>
          </div>
        </div>
      </TabPane>
      <TabPane label="作品展示" name="name4" v-else>
        <div class="workParent">
          <div class="workBox" v-for="item in activeList" :key="item.id">
            <div class="work-title">
              <!-- <img class="avatar" :src="item.face" alt="" /> -->
              <Avatar
              class="avatar"
                shape="circle"
                :src="item.face"
                @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                icon="ios-person"
                size="28"
              />
              <div class="info">
                <div class="info-name">{{ item.nick_name }}</div>
                <div class="info-time">{{ item.creattime }}</div>
              </div>
            </div>
            <div class="work-content">
              <div class="content-title">{{ item.title }}</div>
              <div class="content-text">
                {{ item.content }}
              </div>
              <video v-if="item.video_url" controls class="content-video" :src="item.video_url"></video>
            </div>
            <div class="extraInfo">
              <div class="extraInfoItem"  @click="handleSetdlc(2,item)">
          <Icon :type="item.havesc===1? 'md-star':'ios-star-outline'"
             :color="item.havesc===1?'#FDCD10':''" />
             <span>{{ item.is_sc }}</span>
              </div>
              <div class="extraInfoItem"  @click="handleSetdlc(3,item)">
                <img
                  class="extraInfoImg"
                  src="@/assets/active/pic5.png"
                  alt=""
                />
                <span class="extraInfoNum">{{ item.is_zf }}</span>
              </div>
              <div class="extraInfoItem" @click="handleToComment(item)">
                <img
                  class="extraInfoImg"
                  src="@/assets/active/pic6.png"
                  alt=""
                />
                <span class="extraInfoNum">{{ item.is_comits }}</span>
              </div>
              <div class="extraInfoItem" @click="handleSetdlc(1,item)">
                <Icon type="ios-thumbs-up" color="#fdcd10"  v-show="item.havedz"/>
              <Icon type="ios-thumbs-up-outline"  v-show="!item.havedz"/> <span>{{ item.is_like }}</span>
              </div>
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { actdetail, getpeopleList,activeListShow,setdlc } from "@/api/community";
import { time } from "@/config/time";

export default {
  props: {},
  components: {},
  data() {
    return {
      // 渲染数据
      detailData: {},
      signUpList: [],
      activeList: [],
      activeId: 0,
      mid: JSON.parse(localStorage.userInfo).id,
      page: 1,
      pagesize: 10,
    };
  },
  created() {},
  mounted() {
    this.activeId = this.$route.query.id;
    this.getList();

  },
  watch: {
    "$route.query.id"(val) {
      this.activeId = this.$route.query.id;
      this.getList();
    }
  },
  computed: {
    isActiveStart() {
      const currentTime = new Date().valueOf()
      const activeStartTime = new Date(this.detailData.act_stime).valueOf()
      return  currentTime > activeStartTime
    },
    signUpText() {
      const startTime = new Date(this.detailData.ready_stime).getTime()
      const endTime= new Date(this.detailData.ready_time).getTime()
      const currentTime = new Date().getTime()
      if(currentTime < startTime) {
        return '未开始'
      }
      if(currentTime > startTime && currentTime < endTime) {
        if(this.detailData.focus_act === 1) {
          return '已报名'
        }
          return '去报名'
      }
      if(currentTime > endTime) {
        if(this.detailData.focus_act === 1) {
          return '已报名/报名结束'
        }
        return '报名结束'
      }

      // detailData.focus === 1   去报名
    }
  },
  methods: {

    // 活动详情数据
    getList() {
      let npc = {
        mid: this.mid,
        id: this.activeId,
      };
      actdetail(npc).then((res) => {
        if (res.code == 1) {
          this.detailData = {
            ...res.data,
            bnum: res.bnum,
          };
          this.detailData.ready_stime = time.getallTime(
            this.detailData.ready_stime
          );
          this.detailData.ready_time = time.getallTime(this.detailData.ready_time);
          this.detailData.act_stime = time.getallTime(this.detailData.act_stime);
          this.detailData.act_time = time.getallTime(this.detailData.act_time);
        }

        // this.baseInfo=res
      });
    },
    // 切换Tab
    changeTab(v) {
      if (v == "name3") {
        this.getpeopleList();
      }
      if(v==='name4') {
        this.activeListShow()
      }
    },
    // 去作品展示详情页回复查看评论，以及回复消息
    handleToComment(item) {
      // /comment
      this.$router.push({
        path: "/comment",
        query: {
          id: item.id,
          my: item.my,
          type: item.type,
        },
      });
    },
    // 点赞 type 1 点赞 2收藏3转发
    handleSetdlc(type,item) {
      let data = {
        topicid:item.id,
        type: type,
        mid: this.mid,
      };
      setdlc(data).then((res) => {
        if (res.code == 1) {
          this.activeListShow();
          // this.getcircleList();
        }
      });
    },
    // 作品展示
    activeListShow() {
      activeListShow({
        mid: this.mid,
        aid:this.$route.query.id,
        page:1,
        pagesize: 100000
      }).then(res => {
        if(res.code === 1) {
          this.activeList = res.data
        }
      })
    },
    // 获取活动参与人列表
    getpeopleList() {
      let data = {
        mid: this.mid,
        aid: this.activeId,
        page: 1,
        pagesize: 100000,
      };
      getpeopleList(data).then((res) => {
        if (res.code == 1) {
          this.signUpList = res.data;
          this.signUpList.map((v) => {
            v.ctime = time.getallTime(v.ctime);
          });
        }
      });
    },
    // 跳转至活动详情
    toSignUp() {
      if(this.signUpText==='去报名') {
        this.$router.push({
          path: "/active-signup",
          query: {
            id: this.activeId,
          },
        });
      }

    },
  },
};
</script>

<style  lang="scss" scoped>
.detailBox {
  padding: 0 24px;
  .item1 {
    width: 100%;
    img {
      width: 100%;
      object-fit: cover;
    }
  }
  .activeTitle {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0;
  }

  .item2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;

    .item2L {
      display: flex;
      align-items: center;

      .logo {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .item2Info {
        margin-left: 16px;

        .activeName {
          color: #2c2c2c;
          font-size: 18px;
        }

        .activeAccount {
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }

  .baseInfo {
    .baseInfoItem {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      font-size: 14px;

      .valueText {
        color: #000;
      }

      .iconImg {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 9px;
      }

      .lastNum {
        margin-left: 70px;
      }
    }

    .baseInfoDesc {
      text-indent: 30px;
      font-size: 14px;
      color: #666666;
      line-height: 28px;
    }

    .baseInfoImg {
      width: 100%;
      text-align: center;

      img {
        width: 60%;
      }
    }
  }

  .activeInfo {
    .activeInfoDesc {
      text-indent: 30px;
      font-size: 14px;
      color: #666666;
      line-height: 28px;
    }

    .activeInfoImg {
      width: 100%;
      text-align: center;

      img {
        width: 60%;
      }
    }
  }

  .signUpList {

    .signUpListItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 36px 0;

      &:first-child {
        margin-top: 10px;
      }

      .signUpItemRight {
        font-size: 14px;
        color: #666666;
      }

      .signUpItemLeft {
        display: flex;
        align-items: center;

        .signUpInfo {
          .signUpName {
            font-size: 14px;
            margin-bottom: 10px;
            color: #000;
          }

          .signUpTime {
            color: #878583;
          }
        }

        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 17px;
        }
      }
    }
  }

  .workParent {
    padding: 0 20px;
    height: 800px;
    overflow: auto;
    .workBox {
      margin-bottom: 30px;

      .work-title {
        display: flex;
        align-items: center;

        .avatar {
          width: 50px;
          height: 50px;
          display: inline-block;
          border-radius: 50%;
        }

        .info {
          display: flex;
          flex-direction: column;
          margin-left: 12px;

          .info-name {
            color: #333333;
            font-size: 14px;
          }

          .info-time {
            color: #acacac;
            font-size: 12px;
          }
        }
      }

      .extraInfo {
        display: flex;
        font-size: 14px;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        margin-top: 33px;

        .extraInfoItem {
          height: 63px;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #ececec;

          &:last-child {
            border: none;
          }

          .extraInfoImg {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
      }

      .work-content {
        margin-left: 50px;

        .content-title {
          color: #333333;
          font-size: 14px;
          font-weight: 500;
        }

        .content-text {
          font-weight: 400;
          margin-bottom: 20px;
          margin-top: 17px;
        }

        .content-video {
          width: 100%;
          max-height: 200px;
        }
      }
    }
  }
}
</style>
